<style>
  .required {
    color: red;
  }
</style>
<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="ibox float-e-margins">
        <div class="ibox-content col-md-12">
          <form id="dataForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
            <input type="hidden" name="id" v-model="item.id"/>
            <input type="hidden" name="token" v-model="item.token"/>
            <input type="hidden" name="newFlag" v-model="newFlag"/>
            <input type="hidden" name="gender" value="2"/>
            <div class="clearfix "></div>
            <div class="col-md-6">
              <div v-if="newFlag==0">
                <div class="form-group clearfix">
                  <label class="col-md-8 control-label">用户账号：</label>
                  <div class="col-md-12">
                    <input id="bean-account" name="account" v-model="item.account" class="form-control" type="text" placeholder="请输入用户账号" required="" aria-required="true" aria-describedby="bean-account-error" maxlength="55" aria-invalid="true">
                  </div>
                </div>
                <div class="form-group clearfix">
                  <label class="col-md-8 control-label">初始密码：</label>
                  <div class="col-md-12">
                    <input id="a_password" name="password" type="hidden"/>
                    <input id="bean-password" v-model="item.password" class="form-control" type="password" placeholder="请输入用户密码" required="" aria-required="true" aria-describedby="bean-password-error" maxlength="64" aria-invalid="true">
                    <span id="bean-password-error" class="help-block m-b-none" for="bean-password"></span>
                  </div>
                </div>
                <div class="form-group clearfix">
                  <label class="col-md-8 control-label">确认密码：</label>
                  <div class="col-md-12">
                    <input id="a_confirmPassword" name="confirmPassword" type="hidden"/>
                    <input id="bean-confirmPassword" equalTo="#bean-password" v-model="item.confirmPassword" class="form-control" type="password" placeholder="请再次输入密码" required="" aria-required="true" aria-describedby="bean-confirmPassword-error" maxlength="64" aria-invalid="true">
                    <span id="bean-confirmPassword-error" class="help-block m-b-none" for="bean-confirmPassword"></span>
                  </div>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">用户名称：</label>
                <div class="col-md-12">
                  <input id="bean-name" name="name" v-model="item.name" class="form-control" type="text" placeholder="请输入用户名称" required="" aria-required="true" aria-describedby="bean-name-error" maxlength="255" aria-invalid="true">
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">所属机构：</label>
                <div class="col-md-12">
                  <select data-placeholder="选择所属机构" id="bean-orgId" name="orgId" class="form-control" aria-describedby="bean-orgId-error" aria-invalid="true">
                    <option value="0">--无--</option>
                    <option :value="orgItem.id" :selected="item.orgId == orgItem.id" v-for="orgItem in orgItems">{{orgItem.name}}</option>
                  </select>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">用户电话：</label>
                <div class="col-md-12">
                  <input id="bean-cellphone" name="cellphone" v-model="item.cellphone" class="form-control" type="text" placeholder="请输入用户电话" aria-describedby="bean-cellphone-error" maxlength="25" aria-invalid="true">
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">邮箱：</label>
                <div class="col-md-12">
                  <input id="bean-email" name="email" v-model="item.email" class="form-control" type="text" placeholder="请输入邮箱" aria-describedby="bean-email-error" maxlength="55" aria-invalid="true">
                </div>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">状态：</label>
                <div class="col-md-12">
                  <select data-placeholder="选择状态" id="bean-state" name="state" class="form-control" aria-describedby="bean-state-error" aria-invalid="true">
                    <option :selected="item.state==0" value="0">启用</option>
                    <option :selected="item.state==1" value="1">禁用</option>
                  </select>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">固定电话：</label>
                <div class="col-md-12">
                  <input id="bean-telephone" name="telephone" v-model="item.telephone" class="form-control" type="text" placeholder="请输入固定电话" aria-describedby="bean-telephone-error" maxlength="55" aria-invalid="true">
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">身份证号：</label>
                <div class="col-md-12">
                  <input id="bean-idCard" name="idCard" v-model="item.idCard" class="form-control" type="text" placeholder="请输入身份证号" aria-describedby="bean-idCard-error" maxlength="28" aria-invalid="true">
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">联系地址：</label>
                <div class="col-md-12">
                  <input id="bean-address" name="address" v-model="item.address" class="form-control" type="text" placeholder="请输入联系地址" aria-describedby="bean-address-error" maxlength="55" aria-invalid="true">
                </div>
              </div>

            </div>

            <div class="clearfix "></div>
            <div class="col-12 text-center" style="height: 50px;">
              <div>
                <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'
  import $ from '@/assets/js/jquery-vendor.js'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'
  import {$storage, apiUtil, axiosContentType, site} from '@/assets/js/boss'
  import Swal from 'sweetalert2';

  export default {
    data() {
      return {
        item: {},
        newFlag: 0,
        uuidToken: '',
        orgItems: []
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      that.staff.init(() => {
        // --选择框--
        $('#dataForm').validate();
        that.newFlag = $storage.getItem(site.staff.info);
        that.uuidToken = apiUtil.guid();
        if (apiUtil.existSessionKey(site.staff.info)) {
          that.info();
        }
        that.getOrglist();
      });
    },
    methods: {
      info() {
        let that = this;
        axios.post(site.staff.info + $storage.getItem(site.staff.info), {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.item = result.data;
          } else {
            Swal.fire(result.message);
          }
        });
      },
      getOrglist() {
        let that = this;
        axios.post(site.orgInfo.list, {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.orgItems = result.data;
          } else {
            Swal.fire(result.message);
          }
        });
      },
      save() {
        let that = this;
        if ($('#dataForm').valid()) {
          that.staff.encrypt(function (encrypt) {
            $('#a_password').val(that.crypto.encrypt(encrypt.key, that.crypto.md5(that.item.password)));
            $('#a_confirmPassword').val(that.crypto.encrypt(encrypt.key, that.crypto.md5(that.item.confirmPassword)));
            axios.post(site.staff.save, $('#dataForm').serialize()
              , axiosContentType.xWwwFormUrlencoded).then(function (response) {
              const result = response.data;
              if (result.code === 0) {
                parent.$vueApp.page();
                Swal.fire('保存成功!');
                that.lbox.closeMyBoxLayer()
              } else {
                Swal.fire(result.message);
              }
            });
          });
        }
      }
    }
  }
</script>
